$(function () {
    //需求1 初始化文章类别
    let layer = layui.layer
    initArtCateList()
    function initArtCateList() {
        axios({
            method: 'get',
            url: '/my/article/cates',
        }).then(function (res) {
            // console.log(res.data);
            if (res.data.status != 0) {
                return layer.msg(res.data.message)
            }
            // 定义一个数组 装tr
            let ary = []
            // 定义一个变量装序号 循环一次自增1
            // let i=1
            res.data.data.forEach(function (item, index) {
                // i++
                ary.push(`
             <tr>
                        <td>${index + 1}</td>
                        <td>${item.name}</td>
                        <td>${item.alias}</td>
                        <td>
                            <button class="btn_edit layui-btn layui-btn-xs" data-id='${item.Id}'>编辑</button>
                            <button class="btn_del layui-btn  layui-btn-xs layui-btn-danger" data-id='${item.Id}'>删除</button>
                        </td>
            </tr>
            `)
            })
            // console.log(ary);
            let str = ary.join('')
            // console.log(str);
            $('tbody').empty().html(str)
        })
    }
    // 需求2 新增文章类别
    let indexAdd = null;
    $('#btnAdd').on('click', function () {
        indexAdd = layer.open({
            type: 1,
            title: '添加文章分类',
            area: ['500px', '250px'],
            content: `
     <form class="layui-form" action="" id='formAdd'>
                <!--1--!>
                <div class="layui-form-item">
                    <label class="layui-form-label">分类名称</label>
                    <div class="layui-input-block">
                    <input type="text" name="name" required  lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input">
                    </div>
                </div>
                 <!--2--!>
                <div class="layui-form-item">
                    <label class="layui-form-label">分类别名</label>
                    <div class="layui-input-block">
                    <input type="text" name="alias" required  lay-verify="required" placeholder="请输入分类别名" autocomplete="off" class="layui-input">
                    </div>
                </div>
                 <!--3--!>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
    </form>
        `
        });
    })

    //需求3 添加文章分类
    // form表单是动态创建的 不能直接给它注册事件 要委托给body 父元素
    $('body').on('submit', '#formAdd', function (e) {
        e.preventDefault()
        let data = $(this).serialize()
        // 发送ajax请求
        axios({
            method: 'post',
            url: "/my/article/addcates",
            data: data,
        }).then(function (res) {
            // console.log(res.data);
            if (res.data.status != 0) {
                return layer.msg(res.data.message)
            }
            layer.msg('添加文章类别成功')
            // 关闭对话框
            layer.close(indexAdd)
            // 清空表单内容
            // $('#formAdd')[0].reset()
            // 重新渲染页面
            initArtCateList()
        })
    })

    //需求4 修改文章分类
    let form = layui.form
    let indexEdit = null;
    $('tbody').on('click', '.btn_edit', function () {
        indexEdit = layer.open({
            type: 1,
            title: '修改文章分类',
            area: ['500px', '250px'],
            content: `
<form class="layui-form" lay-filter="formEdit" id='formEdit'>
    <!--0--!>
  <input type='hidden' name='Id'>
   <!--1--!>
    <div class="layui-form-item">
        <label class="layui-form-label">分类名称</label>
        <div class="layui-input-block">
         <input type="text" name="name" required  lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input">
        </div>
    </div>
   <!--2--!>
    <div class="layui-form-item">
        <label class="layui-form-label">分类别名</label>
        <div class="layui-input-block">
        <input type="text" name="alias" required  lay-verify="required" placeholder="请输入分类别名" autocomplete="off" class="layui-input">
        </div>
    </div>
   <!--3--!>
    <div class="layui-form-item">
        <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
        `
        });
        //需求5 展示当前的文章分类信息
        // 获取点击的一行的ID名
        let id = $(this).attr('data-id')
        // console.log(id);
        // 发送ajax请求 获取对应id的文章类别
        axios({
            method: 'get',
            // url: '/my/article/cates/',
            // 1
            url: '/my/article/cates/' + id,
            // 2 不行
            // params: {
            //     id: id
            // }
        }).then(function (res) {
            // console.log(res.data);
            if (res.data.status != 0) {
                return layer.msg(res.data.message)
            }
            //数据展示
            // layer.msg('')
            form.val('formEdit', res.data.data)
        })
    })

    //需求6 
    $('body').on('submit', '#formEdit', function (e) {
        e.preventDefault()
        let data = $(this).serialize()
        // 发送ajax请求
        axios({
            method: 'post',
            url: "/my/article/updatecate",
            data: data,
        }).then(function (res) {
            // console.log(res.data);
            if (res.data.status != 0) {
                return layer.msg(res.data.message)
            }
            layer.msg('修改文章类别成功')
            // 关闭对话框
            layer.close(indexEdit)
            // 清空表单内容
            // $('#formAdd')[0].reset()
            // 重新渲染页面
            initArtCateList()
        })
    })

    //需求7 删除文章列表
    $('tbody').on('click', '.btn_del', function () {
        // 获取id
        let id = $(this).attr('data-id')
        layer.confirm('确认删除吗?', { icon: 3, title: '提示' }, function (index) {
            //do something
            axios({
                method: 'get',
                url: '/my/article/deletecate/' + id
            }).then(function (res) {
                console.log(res.data);
                if (res.data.status != 0) {
                    return layer.msg(res.data.message)
                }
                layer.msg('删除成功')
                initArtCateList()
            })
            layer.close(index);
        });
    })
})